<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          svg{
               border:solid 1px #ccc;
          }
    </style>
</head>
<body>
   <svg id="svg1">
     <path d="M20 50 H80 50"
           fill="none" stroke="#00f" stroke-width="2" >
          <animate attributeType="XML"
               attributeName="d"
               to="M20 50 A20 20 0 0 1 80 50"
               dur="2s"
               fill="freeze"/>
     </path>
   </svg>
   <svg id="svg2"></svg>

    <script src="snap.svg.js"></script>
    <script>
       const svg = Snap('#svg1');
       svg.attr({
          width:400,
          height:400,
          viewBox:'0 0 100 100'
       });

       const circle = svg.circle(50,50,10);
       circle.attr({
          fill:'#fac'
       });

       circle.click(e=>{
          circle.animate({r:30,cx:60},1000,function(){
              this.animate({r:10,cx:50},1000)
          });
       });


       //----------------------------------------------------


       const svg2 = Snap('#svg2');
       svg2.attr({
          width:400,
          height:400,
          viewBox:'0 0 100 100'
       });

       const path = svg2.path('M20 50 H 80');
       path.attr({
          fill:'none',
          stroke:'#00f',
          strokeWidth:2
       });
       path.animate({d:'M20 50 A20 20 0 0 1 80 50A20 20 0 0 1 20 50 '},1000);

    </script>
</body>
</html>